<script setup lang="ts">
import { ref } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: 0,
    linkid: "",
    title: "",
    av_id: "",
    release_date: "",
    len: "",
    director: "",
    studio: "",
    label: "",
    series: "",
    genre: "",
    stars: "",
    director_url: "",
    studio_url: "",
    label_url: "",
    series_url: "",
    stars_url: "",
    bigimage: "",
    image_len: ""
  })
});

const formConfig = {
  formItems: [
    {
      type: "input",
      label: "av_id",
      prop: "av_id",
      classType: "w-1/4"
    },
    {
      type: "input",
      label: "linkid",
      prop: "linkid",
      classType: "w-1/4"
    },
    {
      type: "input",
      label: "发布日期",
      prop: "release_date",
      classType: "w-1/4"
    },
    {
      type: "input",
      label: "视频时长",
      prop: "len",
      classType: "w-1/4"
    },
    {
      type: "input",
      label: "标题",
      prop: "title",
      classType: "w-full"
    },
    {
      type: "input",
      label: "导演",
      prop: "director",
      classType: "w-1/3"
    },
    {
      type: "input",
      label: "制造商",
      prop: "studio",
      classType: "w-1/3"
    },
    {
      type: "input",
      label: "发行商",
      prop: "label",
      classType: "w-1/3"
    },
    {
      // type: "tag",
      type: "input",
      label: "系列",
      prop: "series",
      classType: "w-1/3"
    },
    {
      // type: "splitTag",
      type: "input",
      label: "类别",
      prop: "genre",
      classType: "w-1/3"
    },
    {
      // type: "splitTag",
      type: "input",
      label: "演员",
      prop: "stars",
      classType: "w-1/3"
    },
    {
      type: "input",
      label: "预览图",
      prop: "bigimage",
      classType: "w-2/4"
    },
    {
      type: "input",
      label: "预览图数",
      prop: "image_len",
      classType: "w-1/4"
    },
    {
      type: "input",
      label: "存在状态",
      prop: "status",
      classType: "w-1/4"
    },
    {
      type: "input",
      label: "磁力",
      prop: "magnet",
      classType: "w-full"
    },
    {
      type: "input",
      label: "m3u8",
      prop: "m3u8",
      classType: "w-full"
    }
  ]
};

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    size="small"
    label-width="70px"
    class="flex flex-wrap justify-center"
  >
    <template v-for="item in formConfig.formItems" :key="item.prop">
      <el-form-item
        :label="item.label"
        :prop="item.prop"
        :class="item.classType"
      >
        <template v-if="item.type === 'input'">
          <el-input
            v-model="newFormInline[item.prop]"
            clearable
            :placeholder="`请输入${item.label}`"
          />
        </template>
        <template v-else-if="item.type === 'input-number'">
          <el-input-number
            v-model="newFormInline[parseInt(item.prop)]"
            :placeholder="`请输入${item.label}`"
          />
        </template>
        <template v-else-if="item.type === 'date-picker'">
          <el-date-picker
            v-model="newFormInline[item.prop]"
            type="date"
            :placeholder="`请输入${item.label}`"
          />
        </template>
        <template v-else-if="item.type === 'tag'">
          <el-tag
            v-for="tag in newFormInline[item.prop]"
            :key="tag"
            class="mx-1"
            closable
            :disable-transitions="false"
            :type="tag.type"
            >{{ tag }}
          </el-tag>
        </template>
        <template v-else-if="item.type === 'splitTag'">
          <el-tag
            v-for="(tag, index) in newFormInline[item.prop].split('|').slice(1)"
            :key="tag"
            class="mx-1"
            closable
            :disable-transitions="false"
            :type="tag.type"
            >{{ index }} . {{ tag }}
          </el-tag>
        </template>
      </el-form-item>
    </template>
  </el-form>
</template>
